<template>
  <section :style="{height: $store.state.height + 'px'}" style="width: 100%;position: relative;">
    <div id="arcgis3d" :style="{height: $store.state.height + 'px', width: '100%'}"></div>
    <div id="infoDiv">
      <input class="esri-component esri-widget--button esri-widget esri-interactive" ref="switch"
        type="button" id="switch-btn" value="3D" @click="switchView()">
    </div>
  </section>
</template>

<script>
import { loadModules } from 'esri-loader'

// const url = 'http://10.1.3.42:6080/arcgis/rest/services/test/MapServer'
const url = 'http://10.1.3.42:6080/arcgis/rest/services/testserver/MapServer'
export default {
  name: "arcgis3d",
  title: "搜索切换",
  data () {
    return {
      appConfig: {
        mapView: null,
        sceneView: null,
        activeView: null,
        container: "arcgis3d"  // use same container for views
      }
    }
  },
  mounted () {
    this.loadMap()
  },
  methods: {
    loadMap () {
      loadModules([
        'esri/Map',
        "esri/WebMap",
        'esri/views/SceneView',
        "esri/views/MapView",
        "esri/layers/MapImageLayer",  // Require the TileLayer module
        "esri/widgets/Search",
        "dojo/domReady!"
      ]).then(([EsriMap, WebMap, SceneView, MapView, MapImageLayer, Search]) => {
        let layer = new MapImageLayer({
          url: url,
          format: "jpgpng" // server exports in either jpg or png format
        })
        let map = new EsriMap({
          basemap: 'osm',
          layers: [layer]
        })

        // Load a web map in a 2D MapView
        let webmap = new WebMap({
          portalItem: {
            id: "88275f408861408dab986ad78f2a97cf"
          }
        })

        let initialViewParams = {
          // map: map,
          // zoom: 12,
          // center: [-122.43759993450347, 37.772798684981126],
          zoom: 5,
          center: [106.51, 29.55],
          container: this.appConfig.container
        };
        // create 2D view and and set active
        initialViewParams.map = webmap
        this.appConfig.mapView = createView(initialViewParams, "2d")
        this.appConfig.activeView = this.appConfig.mapView

        // create 3D view, won't initialize until container is set
        initialViewParams.map = map
        initialViewParams.container = null
        this.appConfig.sceneView = createView(initialViewParams, "3d")

        function createView (params, type) {
          let view
          let is2D = type === "2d"
          if(is2D){
            view = new MapView(params)

          } else {
            view = new SceneView(params)
          }
          var searchWidget = new Search({
            view: view
          })
          view.ui.add(searchWidget, {
            position: "top-right"
          })
          return view
        }
      }).catch(err => {
        console.log('地图加载失败', err);
      })
    },
    switchView(){
      let switchButton = this.$refs.switch
      let is3D = this.appConfig.activeView.type === "3d"
      // remove the reference to the container for the previous view
      this.appConfig.activeView.container = null
      if (is3D){
        // if the input view is a SceneView, set the viewpoint on the
        // mapView instance. Set the container on the mapView and flag
        // it as the active view
        this.appConfig.mapView.container = this.appConfig.container
        this.appConfig.activeView = this.appConfig.mapView
        switchButton.value = "3D"
      } else {
        this.appConfig.sceneView.container = this.appConfig.container
        this.appConfig.activeView = this.appConfig.sceneView
        switchButton.value = "2D"
      }

    }
  }
}
</script>

<style scoped>
  @import url('https://js.arcgis.com/4.8/esri/css/main.css');
    #infoDiv{
      position: absolute;
      top: 15px;
      left: 60px;
    }

    #infoDiv input {
      border: none;
      box-shadow:  rgba(0, 0, 0, 0.3) 0px 1px 2px;
    }
</style>
